<template>
	<div class="myresources">
		<div class="crumbs-wrapper">
			<Crumbs title="资源管理" sub-title="我的资源" />
		</div>
		<div class="main">
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="平台名称">
					<el-select v-model="searchFormData.platformName" clearable>
						<el-option label="IAAS" value="IAAS"></el-option>
						<el-option label="PAAS" value="PAAS"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="资源名称">
					<el-input v-model="searchFormData.resourceName" placeholder="请输入资源名称"></el-input>
				</el-form-item>
				<el-form-item label="资源状态">
					<el-select v-model="searchFormData.resStatus" clearable>
						<el-option label="正常" :value="1"></el-option>
						<el-option label="即将过期" :value="2"></el-option>
						<el-option label="已过期" :value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button @click="reset">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="batch_renewal" :disabled="selection.length==0">批量续期</el-button>
				</el-form-item>
			</el-form>
			<el-row>
				<el-table :data="tableData" v-loading="tableLoading" size="small" height="680"
					:header-cell-style="{'text-align':'center', background: '#F8F8F8'}" :cell-style="{'text-align':'center'}"
					@select="row_select" @select-all="select_all">
					<el-table-column type="selection" />
					<el-table-column prop="platformName" label="平台名称" />
					<el-table-column label="资源名称">
						<template slot-scope="scope">
							<el-link :type="scope.row.resStatus == 3 ? 'danger' : 'primary'"
								:disabled="scope.row.resStatus == 3" 
								@click="jump(scope.row)">{{scope.row.resourceName}}</el-link>
						</template>
					</el-table-column>
					<el-table-column label="目录名称">
						<template slot-scope="scope">
							<span v-if="scope.row.platformName == 'IAAS'">{{scope.row.cataName}}</span>
							<span v-if="scope.row.platformName == 'PAAS'"> -- </span>
						</template>
					</el-table-column>
					<el-table-column prop="serviceLife" label="资源使用期限" />
					<el-table-column label="资源状态">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.resStatus == 1" type="success">正常</el-tag>
							<el-tag v-if="scope.row.resStatus == 2" type="warning">即将过期</el-tag>
							<el-tag v-if="scope.row.resStatus == 3" type="danger">过期</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-link type="primary" @click="open_view_dialog(scope.row)">资源详情</el-link>
							&nbsp;&nbsp;&nbsp;
							<el-link 
								:type="scope.row.resStatus == 1 ? 'default' : 'primary'"
								:disabled="scope.row.resStatus == 1" 
								@click="renewal(scope.row)">资源续期</el-link>
							&nbsp;&nbsp;&nbsp;
							<el-link 
								:type="scope.row.resStatus != 3 ? 'default' : 'primary'"
								:disabled="scope.row.resStatus != 3"
								@click="delete_resource(scope.row)">删除</el-link>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
			<!-- 分页 -->
			<p>
				<el-pagination background layout="total, prev, pager, next"
					:current-page="searchFormData.pageNum"
					:page-sizes="[10, 20, 30, 50]"
					:page-size="10"
					:total="searchFormData.total" 
					@current-change="currentPageChange"
				  />
			</p>
		</div>
		
		<!-- 资源详情dialog -->
		<el-dialog :title="resourceViewName" :visible.sync="resourceViewVisible" width="40%">
			<el-tree :data="resourceChildren" :props="defaultProps"></el-tree>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchFormData: {
					platformName: "", //资源平台类型
					resourceName: "", //资源名称
					resStatus: "" ,//资源过期状态
					pageNum: 1,
					pageSize: 10,
					total: 0
				},
				tableData: [],
				tableLoading: false,
				selection: [], //选中的行
				resourceViewVisible: false,
				resourceViewName: '',
				resourceChildren: [] ,//资源详情
				defaultProps: {
					children: 'children',
					label: 'authObjectDesc'
				}
			}
		},
		mounted() {
			this.load_table_data();
		},
		computed: {
			selectionType() {
				return this.selection.legth == 0 ? '' : this.selection[0].platformName
			}
		},
		methods: {
			reset() {
				this.searchFormData.resourceName = ''
				this.searchFormData.platformName = ''
				this.searchFormData.resStatus = ''
				this.searchFormData.pageNum = 1
				this.load_table_data()
			},
			search() {
				this.load_table_data();
			},
			load_table_data() { // 获取表格数据
				this.tableLoading = true;
				this.$http({
					url: '/api/resources/apply/listAudit',
					method: 'POST',
					data: this.searchFormData
				}).then( res => {
					this.tableLoading = false;
					this.tableData = res.data.rows
					this.searchFormData.total = res.data.total
				})
			},
			currentPageChange(pageNum) { //当前页发生变化
				this.searchFormData.pageNum = pageNum
				this.load_table_data()
			},
			row_select(selection, row) {
				this.selection = selection;
			},
			select_all(selection) {
				this.selection = selection;
			},
			jump(row) {
				//跳转相应资源
				switch(row.platformName) {
					case 'IAAS' : {
						// this.$message.warning('尚未对接完成')
						break;
					}
					case 'PAAS' : {
						// this.$message.warning('尚未对接完成')
						window.open(row.resourceUrl, '_blank')
						break;
					}
				}
			},
			renewal(row) { //单个续期
				//判断当前选择的类型，
				let resType = row.platformName;
				this.tableLoading = true;
				switch(resType) {
					case 'PAAS' : {
						this.$http({ //加载依附资源
							url: '/api/resources/depend/list',
							method: 'POST',
							data: {
								resourceId: row.resourceId
							}
						}).then(res=>{
							let depends = res.data.data //获取到依附资源ID列表
							console.log('依附资源',depends);
							this.$router.push({
								path: '/paasApply',
								query: {
									resIds: JSON.stringify(depends.concat(row.resourceId))
								}
							})
						})
						break;
					}
					case 'IAAS' : {
						this.$router.push({
							path: '/iaasApply',
							query: {
								resIds: JSON.stringify([{
									resId: row.resourceId, //资源ID
									parentId: row.cataId, //类别ID
									resourceName: row.resourceName //资源名称
								}])
							}
						})
						break;
					}
				}
			},
			batch_renewal() { //批量续期
				this.tableLoading = true;
				this.check_selection()
				.then(this.load_depends.bind(this))
				.then((resList)=>{
					// console.log('依附资源',resList);
					let depends = [] //获取到依附资源ID
					resList.forEach(res=>{
						// console.log('单个资源', res.data.data) 
						depends.push(...res.data.data)
					})
					// console.log('依附ID列表',depends)
					this.tableLoading = false;
					switch(this.selectionType) {
						case 'PAAS' : {
							this.$router.push({
								path: '/paasApply',
								query: {
									resIds: JSON.stringify( [...this.selection.map(res=>res.resourceId), ...depends] )
								}
							})
							break;
						}
						case 'IAAS' : {
							this.$router.push({
								path: '/iaasApply',
								query: {
									resIds: JSON.stringify(
										this.selection.map(res=>{
											return {
												resId: res.resourceId, //资源ID
												parentId: res.cataId, //类别ID
												resourceName: res.resourceName //资源名称
											}
										})
									)
								}
							})
							break;
						}
					}
				})
				.catch((err)=>{
					this.$alert(err, '警告', { type: 'warning'})
				})
			},
			check_selection() { //检查多选的合法性，不允许同时选择paas和iaas, 不允许同时选择不同类别的iaas, 不允许选择未过期资源
				return new Promise((resolve, reject)=>{
					this.selection.forEach(res=>{
						if(res.resStatus == 1) {
							reject('您只能选择即将过期或已过期的资源')
						}
					})
					this.selection.reduce((pre,next)=>{
						if(pre.platformName != next.platformName) {
							reject('不可以同时选择PaaS和IaaS资源')
						}
						return next;
					})
					this.selection.reduce((pre,next)=>{
						console.log(pre,next);
						if(pre.cataId != next.cataId) {
							reject('不可以同时选择不同类别的IaaS资源')
						}
						return next;
					})
					resolve()
				})
			},
			load_depends() {
				let reqList = this.selection.map(item=>{
					return this.$http({
						url: '/api/resources/depend/list',
						method: 'POST',
						data: {
							resourceId: item.resourceId
						}
					})
				})
				return Promise.all(reqList)
			},
			delete_resource(row) { //删除工单
				this.$confirm('此操作将删除该记录, 是否继续?', '提示', { type: 'error' })
				.then(() => {
					this.$http({
						url: `/api/resources/apply/delete/${row.resApplyId}`
					}).then(res=>{
						this.$message.success(res.data.msg);
						this.load_table_data()
					})
				})
			},
			open_view_dialog(row) {
				this.resourceViewName = row.resourceName;
				this.resourceViewVisible = true;
				this.$http({
					url: '/api/resources/children',
					method: 'POST',
					data: {
						parentId: row.resourceId
					}
				}).then(res=>{
					this.resourceChildren = res.data.data
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.myresources {
		padding: 5px 30px 10px;
		height: calc(100vh - 100px);
		background: #f8f8f8;

		.main {
			height: 95%;
			background-color: white;
			overflow-y: auto;
			padding: 30px 30px 10px;
			box-sizing: border-box;
			position: relative;
		}
	}
</style>
